<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="bookShopCar.css">
  <script src="bookShopCar.js"></script>
</head>
<body>


<div id="box" >

  <div id="left">
    <div id="left-info" style="width: 200px;height: 300px;line-height: 3em;">

    </div>
    <img id="bookImg" >

    <input type="button" id="putInCar" value="放入购物车" onclick="put()" style="position: absolute;left: 10px;bottom: 10px;">
  </div>

  <div id="right">
    <h1>图书一览</h1>

    <table id="booksTable" border="0" cellspacing="0">
      <thead style="width: 350px;">
      <tr style="border-bottom: #a8a8a8 1px solid;"><th></th><th>书名</th><th>作者</th><th>售价</th></tr>
      </thead>

      <tbody id="booksTable-tbody" style="margin-top: 20px;border:  #cccccc 1px solid">
      <tr><td><img src="booksImg/b1.jpg"></td><td>书名1</td><td>作者1</td><td>售价1</td></tr>
      </tbody>
    </table>

    <div style="margin-top: 50px">
      图书名：<input type="text"><input id="query" type="button" onclick="querybooks(this)" value="查询">
    </div>
  </div>

  <div id="shade">
  </div>
  <div id="shopCarBox">
    <table id="shopCar" cellspacing="0">
      <thead style="">
      <tr><th>商品名</th><th>单价</th><th>数量</th><th>总价</th><th>移除商品</th></tr>
      </thead>

      <tbody id="shopCar-tbody">
      <tr><td></td><td></td><td><input type="number" onclick="判断数量"></td><td></td><td><input type="button" value="移除商品"></td></tr>
      </tbody>
    </table>

    <input type="button" value="继续购物" onclick="closeShade()">商品总价：<span id="allprice"></span>
  </div>
</div>
</body>
</html>
